<template>
	<view>
		<uni-nav-bar statusBar backgroundColor="#121213" leftWidth='200px' :border='false'>
			<block v-slot:left class="bg-c">
				<view class="flex flex-row" v-if='USERINFO'>
					<view class="bg-white pd-1 flex flex-center  rounded-7">
						<image class="avatar rounded-7" :src="USERINFO.avatar!=''?USERINFO.avatar:WEBCONFIG.avatar">
						</image>
					</view>

					<view class="ml-2">
						<view class="h8 text-white font-weight-500 mb-1 w-50 ellipsis-text">{{USERINFO.nickname}}</view>
						<view class="h8 text-white h11 font-weight-300">{{USERINFO.id}}</view>
					</view>
				</view>
			</block>
		</uni-nav-bar>


		<view class="p-4 ">
			<swiper autoplay circular interval="2000" class="banner mb-9">
				<swiper-item class="flex flex-center" v-for="(item,index) in adsList" :key='index'>
					<image class="banner-image rounded-5" :src='item.image_url'>
					</image>
				</swiper-item>
			</swiper>

			<view class="my-4">
				<uni-notice-bar background-color='#000' color='#fff' single scrollable showIcon
					:text='WEBCONFIG.notice'></uni-notice-bar>
			</view>

			<view class="h8 font-weight-bold text-dark-light-3 text-gap mb-7">推荐玩法</view>

			<view class="flex flex-row mb-4">
				<image class="index-image" @click="$page.open('/pages/video/index?type='+2)" :src='WEBCONFIG.nav'>
				</image>
				<image class="index-image im" @click="$page.open('/pages/video/index?type='+1)" :src='WEBCONFIG.nav1'>
				</image>
			</view>

			<view>
				<view class="flex flex-row flex-y-center mb-3">
					<image src="../../static/icon/question.png" class="icon"></image>
					<view class="text-white h9 ml-4">第一步：导入小说文字</view>
				</view>
				<view class="setps-box flex flex-row mb-8">
					<view class="setps ml-2"></view>
					<view class="ml-3 answer p-3 flex flex-row flex-y-center">
						<view class="line"></view>
						<view class="text-1 ml-3">{{WEBCONFIG.setup_1==''?'输入小说内容或者文字':WEBCONFIG.setup_1}}</view>
					</view>
				</view>

				<view class="flex flex-row flex-y-center mb-3">
					<image src="../../static/icon/question.png" class="icon"></image>
					<view class="text-white h9 ml-4">第二步：AI生成配图</view>
				</view>

				<view class="setps-box flex flex-row">
					<view class="setps ml-2"></view>
					<view class="ml-3 p-2">
						<image class="eg-image" :src="WEBCONFIG.setup_2">
						</image>
					</view>
				</view>


				<view class="flex flex-row flex-y-center mb-3">
					<image src="../../static/icon/question.png" class="icon"></image>
					<view class="text-white h9 ml-4">第三步：AI生成配音</view>
				</view>

				<view class="setps-box flex flex-row">
					<view class="setps ml-2"></view>
					<view class="ml-3 p-2">
						<image class="sound-image" src="../../static/icon/sound.png"></image>
					</view>
				</view>


				<view class="flex flex-row flex-y-center mb-3">
					<image src="../../static/icon/question.png" class="icon"></image>
					<view class="text-white h9 ml-4">第四步：AI视频诞生</view>
				</view>
				<view class="setps-box flex flex-row">
					<view class="setps ml-2"></view>
					<view class="ml-3 p-2">
						<image class="eg-image" :src="WEBCONFIG.setup_4">
						</image>
					</view>
				</view>


			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { onLoad, onShow, onShareTimeline, onShareAppMessage } from "@dcloudio/uni-app";
	import { $page, $system, useStorage, $http } from '@/utils';
	import { useUserStore, useWebConfigStore, useRefs } from "@/stores";
	const storage = useStorage()
	const userStore = useUserStore()
	const { USERINFO } = useRefs(userStore);

	const webConfigStore = useWebConfigStore()
	const { WEBCONFIG } = useRefs(webConfigStore);
	onLoad(() => {
		login()
		getAds()
	})
	onShow(() => {
		// uni.hideTabBar();
	})
	const adsList = ref()
	//登录
	const login = (() => {
		const { setUserInfo, hasLogin } = useUserStore();
		if (!hasLogin()) {
			let appid = $system.appid()
			let puid = storage.get('PUID.' + appid) || 0
			uni.login({
				provider: 'weixin',
				success: function (res) {
					$http.post('Login/login', { data: { pid: puid, type: 'weixin', code: res.code } }).then((result : any) => {
						setUserInfo(result.data).catch(() => { });
					})
				}
			})

		}
	})
	//分享
	onShareTimeline(() => {
		return $page.shareTimeline({
			path: '/pages/index/index'
		})
	})

	onShareAppMessage(() => {
		return $page.shareTimeline({
			path: '/pages/index/index'
		})
	})
	const getAds = (() => {
		$http.get('Ads/getList').then(res => {
			adsList.value = res.data
		})
	})
</script>


<style lang="scss" scoped>
	.banner-image {
		width: 662rpx;
		height: 100%;
	}

	.banner {
		width: 100%;
	}

	.avatar {
		width: 72rpx;
		height: 72rpx;
	}

	.rounded-7 {
		border-radius: 28rpx;
	}

	.pd-1 {
		padding: 2rpx;
	}

	.h11 {
		font-size: 20rpx;
	}

	.text-gap {
		letter-spacing: 4rpx;
	}

	.icon {
		width: 32rpx;
		height: 30rpx;
	}

	.setps {
		height: auto;
		width: 1rpx;
		border-left: 0.5rpx dashed rgba(255, 255, 255, 0.3);
	}

	.line {
		width: 4rpx;
		height: 26rpx;
		background: #37FFEA;
		box-shadow: 2rpx 0rpx 4rpx 0rpx rgba(55, 255, 234, 0.17);
	}

	.text-1 {
		color: #88888C;
		size: 24rpx;
	}

	.answer {
		width: 60%;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.eg-image {
		width: 220rpx;
		height: 220rpx;
	}

	.sound-image {
		height: 66rpx;
		width: 366rpx;
	}

	.index-image {
		width: 356rpx;
		height: 216rpx;
	}
</style>